// 布局文件（）决定了项目的页面结构，共用一些内容
import React, { Component, Fragment } from 'react';
import { Link } from "react-router-dom";
// 引入嵌套路由的子路由文件
import Admin from "../../router/Admin"
import url from "../../config/url"
import req from "../../http/req"
import { Layout, Menu, Modal, message } from 'antd';
import logo from "../../assets/logo.png"
import minilogo from "../../assets/minilogo.ico"
import "../../assets/layout.css"
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
// 导入强化函数
import CheckLogin from "../../hoc/CheckLogin"

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

class Dashboard extends Component {
  state = {
    collapsed: false,
    selectedKey: [this.props.location.pathname],
    openKey: [this.props.location.pathname.split("/").splice(0,3).join("/")]
  };
  // 初始化acl访问控制列表
  acl = JSON.parse(sessionStorage.getItem("acl"))
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <>
        <Layout style={{ minHeight: '100vh' }}>
          <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            {/* 根据展开折叠的情况判断运用哪张logo图片 */}
            <div className="logo" style={{ textAlign: "center", paddingBottom: "20px", paddingTop: "20px"}}>
              {!this.state.collapsed ? <img src={logo} alt="alibaba" width="120" /> : <img src={minilogo} alt="alibaba" width="32" />}
            </div>
            {/* defaultSelectedKeys控制默认选中
                defaultOpenKeys控制默认选中的父级的展开
            */}
            <Menu theme="dark" mode="inline" defaultSelectedKeys={[this.state.selectedKey]}
            defaultOpenKeys={[this.state.openKey]}>
              {/* 动态输出菜单 */}
              {
                this.acl.map(el => {
                  // 注意，空数组为真
                  // key值用什么来表示（唯一），这里不建议用id，用路径，后续修复轻松
                  return el.children.length > 0 ? (
                    <SubMenu key={el.auth_path} title={el.auth_name}>
                      {
                        el.children.map(ele => {
                          // 只输出is_nav为1的菜单
                          return ele.is_nav ? (
                            <Menu.Item key={ele.auth_path}>
                              <Link to={ele.auth_path}>{ele.auth_name}</Link>
                            </Menu.Item>
                          ) : (<Fragment key={ele.auth_path}></Fragment>)
                        })
                      }
                    </SubMenu>
                  ) : (
                    <Menu.Item key={el.auth_path}>
                      <Link to={el.auth_path}>{el.auth_name}</Link>
                    </Menu.Item>
                  )
                })
              }
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: "5 5" }}>
              {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: this.toggle,
              })}
              {/* 这里写最上面那行信息 */}
              <span style={{ paddingLeft: "20px" }}>
                您好，{this.state.uname}!上次登录于({this.state.ip})[<a onClick={this.confirm}>注销登录</a>]
              </span>
            </Header>
            <Content
              className="site-layout-background"
              style={{
                margin: '24px 16px',
                padding: 24,
                minHeight: 280,
              }}
            >
              {/* 在这里写路由渲染容器 */}
              <Admin/>
            </Content>
          </Layout>
        </Layout>
      </>
    );
  }
  // 获取当前管理员的基本信息（uname,ip,,,）
  componentDidMount() {
    req.get(url.GetAdminInfo).then((res) => {
      if (res.data.errNo === 0) {
        this.setState(
          {
            uname: res.data.accountInfo.username,
            ip: res.data.accountInfo.last_ip,
            addr: res.data.accountInfo.last_login_addr.state + " " + res.data.accountInfo.last_login_addr.isp,
          }
        )
      }
    })
  }
  // 注销的模态对话框
  confirm = () => {
    Modal.confirm({
      title: '确认操作',
      icon: <ExclamationCircleOutlined />,
      content: '您是否确认需要注销本次注销',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        // 在这里执行退出操作,即清除jwt和acl
        sessionStorage.removeItem("jwt")
        sessionStorage.removeItem("acl")
        message.success("注销成功", 2, () => {
          this.props.history.push("/login")
        })
      }
    })
  }
}

export default CheckLogin(Dashboard);
